<template>
  <div class='base-chart' style="position: relative">
    <loading></loading>
    <error></error>
    <div class="legend g-legend-wrapper">
      <span class="g-legend-title g-font-f4">
        <span class="g-font-f5"  ref="blank">{{currentDate}}</span>
      </span>
      <div class="g-legend-content">
        <span class="g-font-f5 g-legend-item" :class="netNumber>0?'red':'green'">
        {{netNumber>0?options.netPositiveText:options.netNegativeText}}
           <span class="number">{{ netNumber | numOfLg }}</span>
           {{ netNumber | textOfLg }}
        </span>
        <span class="g-font-f5 g-legend-item blue">{{indexText}}
           <span class="number">{{index}}</span>
       </span>
        <span class="g-font-f5 g-legend-item red-light">{{options.positiveText}}
           <span class="number">{{ inData | numOfLg }}</span>
           {{ inData | textOfLg }}
        </span>
        <span class="g-font-f5 g-legend-item green-light">{{options.negativeText}}
           <span class="number">{{ out | numOfLg }}</span>
           {{ out | textOfLg }}
       </span>
      </div>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>
<script>
  import echarts from 'echarts/lib/echarts';
  import 'echarts/lib/chart/bar';
  // 引入提示框和标题组件
  import 'echarts/lib/component/tooltip';
  import { numOfLg, textOfLg } from '@/filters/legendFormat'
  let midPoint;
  export default{
    data() {
      return {
        netNumber: '',
        inData: '',
        out: '',
        index: '',
        currentDate: '今日'
      }
    },
    props: {
      options: {
        type: Object,
        default: function () {
          return {
            netPositiveText: '净流入',
            netNegativeText: '净流出',
            positiveText: '流入',
            negativeText: '流出'
          }
        }
      },
      chartData: {
        type: Object,
        default: function () {
          return {
            xTime: [],
            in: [],
            out: [],
            indexData: []
          }
        }
      },
      aid: {
        default: 0
      }
    },
    computed: {
      indexText() {
        return ['上证指数', '上证指数', '深证指数', '创业板'][this.aid]
      }
    },
    methods: {
      chartSelected(params) {
        let index = params[0].dataIndex;
        this.currentDate = this.chartData.xTime[index]
        Object.assign(this.$data, {
          netNumber: this.chartData.netNumber[index],
          inData: this.chartData.in[index],
          out: this.chartData.out[index],
          index: this.chartData.indexData[index]
        });
      },
      renderChart (data) {
        this.myChart.clear();
        this.legendInit(data);
        new Promise((resolve, reject) => {
          this.myChart.setOption({
            grid: {
              top: '12%',
              bottom: '10%',
              left: '13%',
              right: '13%'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  show: false,
                  backgroundColor: 'transparent',
                  textStyle: {
                    color: 'transparent'
                  }
                }
              },
              formatter: this.chartSelected
            },
            xAxis: [
              {
                type: 'category',
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dotted'
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: 'rgb(186,201,216)',
                    type: 'dot'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  textStyle: {
                    color: '#a5a5a5'
                  }
                },
                data: data.xTime
              }
            ],
            yAxis: [{
              name: '资金(亿元)',
              nameTextStyle: {
                color: '#555'
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  type: 'dotted',
                  color: '#bac9d8'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#a5a5a5'
                },
                formatter: (val) => {
                  return parseInt(numOfLg(val)) + textOfLg(val)
                }
              }
            }, {
              name: this.indexText,
              axisLabel: {
                textStyle: {
                  color: '#a5a5a5'
                },
                formatter: (val) => {
                  return val + midPoint
                }
              },
              nameTextStyle: {
                color: '#555'
              },
              axisTick: {
                show: false
              },    // 隐藏刻度
              splitLine: {
                lineStyle: {
                  type: 'dotted'
                }
              },
              axisLine: {
                lineStyle: {
                  type: 'dotted',
                  color: '#bac9d8'
                }
              }
            }],
            series: [
              {
                name: '上证指数',
                yAxisIndex: 1,
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#6c9bd2'
                  }
                },
                lineStyle: {
                  normal: {
                    width: 1,
                    color: '#6c9bd2',
                    type: 'dotted'
                  }
                },
                smooth: true,
                symbol: 'none',
                data: data.indexData.map((val, index) => { return (val - 2800) })
              },
              {
                name: '净流入流出',
                type: 'bar',
                stack: 'one',
                itemStyle: {
                  normal: {
                    color: (params) => params.data > 0 ? '#e84b4b' : '#2cc05c'
                  }
                },
                data: data.netNumber
              },
              {
                name: '流入',
                type: 'bar',
                stack: 'one',
                itemStyle: {
                  normal: {
                    color: '#f7b8b8'
                  }
                },
                data: data.in
              },
              {
                name: '流出',
                type: 'bar',
                stack: 'one',
                itemStyle: {
                  normal: {
                    color: '#ade7bf'
                  }
                },
                data: data.out
              }
            ]
          });
          setTimeout(() => {
            resolve();
          }, 0)
        }).then(() => {
          this.$store.dispatch('hideLoading');
        })
      },
      legendInit(data) {
        let maxIndex = data.xTime.length - 1;
        let vm = this;
        this.currentDate = data.xTime[maxIndex];
        vm.netNumber = data.netNumber[maxIndex];
        vm.index = data.indexData[maxIndex];
        vm.inData = data.in[maxIndex];
        vm.out = data.out[maxIndex];
      }
    },
    filters: {
      numOfLg,
      textOfLg
    },
    mounted() {
      this.$store.dispatch('showLoading');
      this.myChart = echarts.init(this.$refs.chart);
    },
    watch: {
      chartData: function (val) {
        midPoint = Math.round((Math.max.apply(null, val.indexData) + Math.min.apply(null, val.indexData)) / 2);
        Object.assign(val, {netNumber: val.in.map((v, i) => { return Number(val.out[i]) + Number(v) })});
        this.renderChart(val)
      }
    },
    beforeDestroy () {
      echarts.dispose(this.myChart);
    }
  }
</script>
<style lang="less" scoped>
  .chart{
    width: 100%;
    height: 2.4rem;
  }
  .g-legend-title{
    width: 20%;
    text-align: left;
    line-height: 0.275rem;
  }
  .g-legend-item{
    width: 40%;
    padding-right: .1rem;
    line-height: 0.275rem;
    white-space: nowrap;
    &:before {
      margin-right: .05rem;
    }
  }
</style>
